<%@ include file="/common.jsp" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <!-- 引入jQuery和Bootstrap -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container mt-5">

    <table class="table">
        <thead>
        <tr>
            <th>部门编号</th>
            <th>部门名称</th>
            <th>公司编号</th>
        </tr>
        </thead>
        <tbody id="departmentTableBody">
        <!-- 表格内容将动态填充在此处 -->
        </tbody>
    </table>

    <!-- 分页 -->
    <div class="d-flex justify-content-between">
        <button class="btn btn-secondary" id="prevPageBtn">&lt; 上一页</button>
        <button class="btn btn-secondary" id="nextPageBtn">下一页 &gt;</button>
    </div>
</div>

<!-- 添加部门模态框 -->
<div class="modal fade" id="addDepartmentModal" tabindex="-1" role="dialog" aria-labelledby="addDepartmentModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addDepartmentModalLabel">添加部门</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 添加部门表单 -->
                <form id="addDepartmentForm">
                    <div class="form-group">
                        <label for="departmentName">部门名称</label>
                        <input type="text" class="form-control" id="departmentName" name="departmentName" required>
                    </div>
                    <div class="form-group">
                        <label for="companyID">公司编号</label>
                        <select class="form-control" id="companyID" name="companyID" required>
                            <!-- 下拉框选项将动态填充在此处 -->
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">添加</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 编辑部门模态框 -->
<div class="modal fade" id="editDepartmentModal" tabindex="-1" role="dialog" aria-labelledby="editDepartmentModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editDepartmentModalLabel">编辑部门</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 编辑部门表单 -->
                <form id="editDepartmentForm">
                    <input type="hidden" id="editDepartmentID" name="departmentID">
                    <div class="form-group">
                        <label for="editDepartmentName">部门名称</label>
                        <input type="text" class="form-control" id="editDepartmentName" name="departmentName" required>
                    </div>
                    <div class="form-group">
                        <label for="editCompanyID">公司编号</label>
                        <select class="form-control" id="editCompanyID" name="companyID" required>
                            <!-- 下拉框选项将动态填充在此处 -->
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">保存更改</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // 加载公司编号下拉框选项
    function loadCompanyOptions(selectElementID, selectedCompanyID = null) {
        $.ajax({
            url: "${pageContext.request.contextPath}/company?operation=getAllCompanies",
            type: "GET",
            dataType: "json",
            success: function (data) {
                var selectElement = $("#" + selectElementID);
                selectElement.empty();
                $.each(data.data, function (index, company) {
                    var selected = company.companyID == selectedCompanyID ? "selected" : "";
                    selectElement.append(
                        "<option value='" + company.companyID + "' " + selected + ">" + company.companyName + "</option>"
                    );
                });
            },
            error: function () {
                alert("获取公司列表时出错！");
            }
        });
    }

    // 加载部门数据的函数
    function loadDepartmentData(start, pageSize) {
        $.ajax({
            url: "${pageContext.request.contextPath}/department?operation=getDepartmentsByPage&start=" + start + "&pageSize=" + pageSize,
            type: "GET",
            dataType: "json",
            success: function (data) {
                $("#departmentTableBody").empty();
                $.each(data.data, function (index, department) {
                    $("#departmentTableBody").append(
                        "<tr data-id='" + department.departmentID + "'>" +
                        "<td>" + department.departmentID + "</td>" +
                        "<td>" + department.departmentName + "</td>" +
                        "<td>" + department.companyID + "</td>" +
                        "</tr>"
                    );
                });
            },
            error: function () {
                alert("获取数据时出错！");
            }
        });
    }

    // 提交添加部门表单的函数
    $("#addDepartmentForm").submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: "${pageContext.request.contextPath}/department?operation=addDepartment",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (data) {
                loadDepartmentData(1, 5);
                $("#addDepartmentForm")[0].reset();
                $("#addDepartmentModal").modal("hide");
                // 移除背景黑影
                $(".modal-backdrop").remove();
                alert("部门添加成功！");
            },
            error: function () {
                alert("添加部门时出错！");
            }
        });
    });


    // 填充编辑部门模态框数据的函数
    function populateEditModal(departmentID) {
        var departmentRow = $("table tbody").find("tr[data-id='" + departmentID + "']");
        var departmentName = departmentRow.find("td:eq(1)").text();
        var companyID = departmentRow.find("td:eq(2)").text();

        $("#editDepartmentID").val(departmentID);
        $("#editDepartmentName").val(departmentName);
        loadCompanyOptions("editCompanyID", companyID);
    }

    // 提交编辑部门表单的函数
    $("#editDepartmentForm").submit(function (event) {
        event.preventDefault();
        $.ajax({
            url: "${pageContext.request.contextPath}/department?operation=updateDepartment",
            type: "POST",
            data: $(this).serialize(),
            dataType: "json",
            success: function (data) {
                loadDepartmentData(1, 5);
                $("#editDepartmentModal").modal("hide");
                alert("部门更新成功！");
            },
            error: function () {
                alert("更新部门时出错！");
            }
        });
    });

    // 处理编辑按钮点击的函数
    function editDepartment(departmentID) {
        populateEditModal(departmentID);
        $("#editDepartmentModal").modal("show");
    }

    // 删除部门的函数
    function deleteDepartment(departmentID) {
        if (confirm("确定要删除这个部门吗？")) {
            $.ajax({
                url: "${pageContext.request.contextPath}/department?operation=deleteDepartment",
                type: "POST",
                data: { departmentID: departmentID },
                dataType: "json",
                success: function (data) {
                    loadDepartmentData(1, 5);
                    alert("部门删除成功！");
                },
                error: function () {
                    alert("删除部门时出错！");
                }
            });
        }
    }

    // 处理分页的函数
    $("#prevPageBtn").click(function () {
        var currentPage = parseInt($("#prevPageBtn").data("currentPage"));
        if (currentPage > 1) {
            loadDepartmentData(currentPage - 1, 5);
            $("#prevPageBtn").data("currentPage", currentPage - 1);
            $("#nextPageBtn").data("currentPage", currentPage - 1);
        }
    });

    $("#nextPageBtn").click(function () {
        var currentPage = parseInt($("#nextPageBtn").data("currentPage"));
        loadDepartmentData(currentPage + 1, 5);
        $("#prevPageBtn").data("currentPage", currentPage + 1);
        $("#nextPageBtn").data("currentPage", currentPage + 1);
    });

    $(document).ready(function () {
        loadDepartmentData(1, 5);
        $("#prevPageBtn").data("currentPage", 1);
        $("#nextPageBtn").data("currentPage", 1);
        loadCompanyOptions("companyID");
    });

    $('#addDepartmentModal, #editDepartmentModal').on('hidden.bs.modal', function () {
        $('.modal-backdrop').remove();
    });

</script>

</body>
</html>
